<template>
    <el-form label-suffix=":" v-loading="loading" :model="formData" :rules="isEditPage ? formRules : {}" ref="formRef"
        label-width="130px">
        <vp-card>
            <template #header>
                <vp-label zh="基础信息" en="Basic Information" />
            </template>
            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="bh">
                        <template #label><vp-label zh="编号" en="No." /></template>
                        <div style="display: flex;width: 100%;">
                            <div style="flex: 1;">
                                <el-input v-if="type == 'add'" maxlength="100" v-model.trim="formData.bh"
                                    placeholder="不填写则自动生成" />
                                <span v-else>{{ formData.bh }}</span>
                            </div>
                        </div>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="bb">
                        <template #label><vp-label zh="版本" en="Revision" /></template>
                        <span v-if="formData.isRevision" style="display: flex;align-items: center;">
                            <span>R{{ formData.bb }}</span>
                            <SvgIcon name="ele-Back" class="ml8 mr8" />
                            <el-link @click="handleView(formData.f_bbid)">R{{ parseInt(formData.bb) - 1 }}</el-link>
                        </span>
                        <el-input v-model="formData.bb" v-trim
                            v-else-if="type === 'add' || (type === 'edit' && !formData.f_bbid)"
                            @input="(val: string) => { formData.bb = verifiyNumberInteger(val) }" maxlength="10"
                            placeholder="请输入版本">
                            <template #prepend>R</template>
                        </el-input>
                        <span v-else>R{{ formData.bb }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="lx">
                        <template #label><vp-label zh="类型" en="Type" /></template>
                        <el-select v-if="isEditPage" class="w100" v-model="formData.lx" clearable collapse-tags>
                            <el-option :value="10" label="技术通告"></el-option>
                            <el-option :value="88" label="维护提示"></el-option>
                        </el-select>
                        <span v-else>{{ formData.lx }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="lyfl">
                        <template #label><vp-label zh="来源分类" en="Source Classification" /></template>
                        <VpDictSelect :lxid="201" :selectedId="formData.lyfl"
                            @dictSelected="obj => { formData.lyfl = obj; }" style="width:100%" v-if="isEditPage">
                        </VpDictSelect>
                        <span v-else>{{ formData.lyfl }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>

            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="jxid">
                        <template #label><vp-label zh="机型" en="A/C Type" /></template>
                        <VpAircraftTypeSelect v-if="isEditPage" :selectedId="formData.jx" :fjjx="true"
                            :disabled="type !== 'add'" class="w100" auth
                            @selected="(obj: any) => { formData.jx = obj.jx; formData.jxid = obj.id; }" />
                        <vp-text v-else>{{ formData.jx }}</vp-text>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="bfrq">
                        <template #label><vp-label zh="颁发⽇期" en="Issue Date" /></template>
                        <el-date-picker v-model="formData.bfrq" type="date" style="width: 100%"
                            value-format="YYYY-MM-DD" v-if="isEditPage" placeholder="请选择颁发⽇期"></el-date-picker>
                        <span v-else>{{ formData.bfrq }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="sxrq">
                        <template #label><vp-label zh="生效日期" en="Effective Date" /></template>
                        <el-date-picker v-model="formData.sxrq" type="date" style="width: 100%"
                            value-format="YYYY-MM-DD" v-if="isEditPage" placeholder="请选择生效日期"></el-date-picker>
                        <span v-else>{{ formData.sxrq }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="blqx">
                        <template #label><vp-label zh="办理期限" en="Processing Period" /></template>
                        <el-date-picker v-model="formData.blqx" type="date" style="width: 100%"
                            value-format="YYYY-MM-DD" v-if="isEditPage" placeholder="请选择办理期限"></el-date-picker>
                        <span v-else>{{ formData.blqx }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>

            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="wcqx">
                        <template #label><vp-label zh="完成期限" en="Deadline" /></template>
                        <el-date-picker v-model="formData.wcqx" type="date" style="width: 100%"
                            value-format="YYYY-MM-DD" v-if="isEditPage" placeholder="请选择完成期限"></el-date-picker>
                        <span v-else>{{ formData.wcqx }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>

            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="bt">
                        <template #label><vp-label zh="标题" en="Title" /></template>
                        <el-input v-if="isEditPage" type="textarea" v-model="formData.bt" maxlength="1000"
                            placeholder="请输入标题" />
                        <span v-else style="white-space:pre">{{ formData.bt }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>


        </vp-card>

        <vp-card>
            <template #header>
                <vp-label zh="关联评估单" en="Associated Assessment Form" />
            </template>
        </vp-card>


        <vp-card>
            <vp-col :span="1">
                <el-form-item prop="ckzl">
                    <template #label><vp-label zh="参考资料" en="Reference Materials" /></template>
                    <el-input v-if="isEditPage" type="textarea" v-model="formData.ckzl" maxlength="1000"
                        placeholder="请输入参考资料" />
                    <span v-else style="white-space:pre">{{ formData.ckzl }}</span>
                </el-form-item>
            </vp-col>
            <vp-col :span="1">
                <el-form-item prop="bj">
                    <template #label><vp-label zh="背景" en="Background" /></template>
                    <el-input v-if="isEditPage" type="textarea" v-model="formData.bj" maxlength="1000"
                        placeholder="请输入背景" />
                    <span v-else style="white-space:pre">{{ formData.bj }}</span>
                </el-form-item>
            </vp-col>
            <vp-col :span="1">
                <el-form-item prop="nr">
                    <template #label><vp-label zh="内容" en="Content" /></template>
                    <el-input v-if="isEditPage" type="textarea" v-model="formData.nr" maxlength="1000"
                        placeholder="请输入内容" />
                    <span v-else style="white-space:pre">{{ formData.nr }}</span>
                </el-form-item>
            </vp-col>
            <vp-col :span="1">
                <el-form-item prop="cs">
                    <template #label><vp-label zh="措施" en="Measures" /></template>
                    <el-input v-if="isEditPage" type="textarea" v-model="formData.cs" maxlength="1000"
                        placeholder="请输入措施" />
                    <span v-else style="white-space:pre">{{ formData.cs }}</span>
                </el-form-item>
            </vp-col>

            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="sj">
                        <template #label><vp-label zh="涉及" en="Involved" /></template>
                        <InvilvedPurpose :disabled="!isEditPage" :multiple="false" v-model="formData.sj">
                        </InvilvedPurpose>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="sjsm">
                        <template #label><vp-label zh="涉及说明" en="Involved Explanation" /></template>
                        <el-input v-if="isEditPage" type="textarea" v-model="formData.sjsm" maxlength="1000"
                            placeholder="请输入涉及说明" />
                        <span v-else style="white-space:pre">{{ formData.sjsm }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>

            <vp-col :span="1">
                <el-form-item prop="syx">
                    <template #label><vp-label zh="适用性" en="Applicability" /></template>
                    <el-input v-if="isEditPage" type="textarea" v-model="formData.syx" maxlength="1000"
                        placeholder="请输入适用性" />
                    <span v-else style="white-space:pre">{{ formData.syx }}</span>
                </el-form-item>
            </vp-col>

            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="syx">
                        <template #label><vp-label zh="工作内容附件" en="Job Attachment" /></template>
                        <!-- <el-input v-if="isEditPage" type="textarea" v-model="formData.syx" maxlength="1000"
                            placeholder="请输入适用性" /> -->
                        <!-- <span v-else style="white-space:pre">{{ formData.syx }}</span> -->
                        <VpRowAttachment accept='.pdf' replaceOld :attachmentList="formData.attachmentList1"
                            @attachmentListEmit="formData.attachmentList1 = $event" :readOnly="!isEditPage">
                        </VpRowAttachment>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="fjys">
                        <template #label><vp-label zh="附件⻚数" en="Attachment Pages" /></template>
                        <el-input v-if="isEditPage" v-model="formData.fjys" type="number" placeholder="请输入附件⻚数" />
                        <span v-else style="white-space:pre">{{ formData.fjys }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>

            <vp-col :span="1">
                <el-form-item prop="gbsm">
                    <template #label><vp-label zh="改版说明" en="Revision Notes" /></template>
                    <el-input v-if="isEditPage" type="textarea" v-model="formData.gbsm" maxlength="1000"
                        placeholder="请输入改版说明" />
                    <span v-else style="white-space:pre">{{ formData.gbsm }}</span>
                </el-form-item>
            </vp-col>

            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="ff">
                        <template #label><vp-label zh="分发" en="Distribution" /></template>
                        <DepartmentMultSelectTree v-if="isEditPage" :treeDefaultChecked="formData.syx"
                            :selectedText="formData.departmentDesc" @treeSelected="handleDepartmentSelected"
                            class="w100">
                        </DepartmentMultSelectTree>
                        <span v-else style="white-space:pre">{{ formData.syx }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="fffwsm">
                        <template #label><vp-label zh="分发范围说明" en="Distribution Description" /></template>
                        <el-input v-if="isEditPage" type="textarea" v-model="formData.fffwsm" maxlength="1000"
                            placeholder="请输入分发范围说明" />
                        <span v-else style="white-space:pre">{{ formData.fffwsm }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
        </vp-card>

        <VpFileListCard :attachmentList="formData.attachmentList" @attachmentListEmit="formData.attachmentList = $event"
            :readOnly="!(isEditPage)">
            <template #header>
                <vp-label zh="附件" en="Attachment" />
            </template>
        </VpFileListCard>


    </el-form>
</template>
<script setup lang="ts" name="ProjectTechBulletin">
import { computed, defineAsyncComponent, ref, watch } from 'vue'
import validateUtils from '/@/utils/validateUtils';
import request from '/@/utils/request';

import VpDictSelect from '/@/components/vp/dict/VpDictSelect.vue'
import VpFileListCard from '/@/components/vp/file/VpFileListCard.vue';
import { verifiyNumberInteger } from '/@/utils/toolsValidate';
import VpAircraftTypeSelect from '/@/components/vp/aircraftType/VpAircraftTypeSelect.vue';
import DepartmentMultSelectTree from '/@/components/vp/department/VpDepartmentMultSelectTree.vue';
import InvilvedPurpose from './invilved.vue';
import VpRowAttachment from '/@/components/vp/file/VpRowAttachment.vue';

import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
const router = useRouter();

const props = defineProps({
    // 页面类型
    type: {
        type: String,
        default: 'add',
    },
    // 加载状态
    loading: {
        type: Boolean,
        default: false,
    },
    // 开启验证
    enableValid: {
        type: Boolean,
        default: true,
    },
    id: {
        type: String
    }
});

const formData = ref({
    id: "",
    zt: null as number | null,
    bh: "",
    bb: "",
    lx: "",
    lyfl: "",
    isRevision: "",
    f_bbid: "",
    jx: "",
    jxid: "",
    bfrq: "",
    sxrq: "",
    blqx: "",
    wcqx: "",
    bt: "",
    ckzl: "",
    bj: "",
    nr: "",
    cs: "",
    syx: "",
    gbsm: "",
    sj: "",
    sjsm: "",
    gznifjglid: "",
    fjys: "",
    ff: [] as any,
    fffwsm: "",
    departmentDesc: "",
    attachmentList: [],
    attachmentList1: [],
});

const formRules = {
    bb: [validateUtils.notNull],
    lx: [validateUtils.notNull],
    lyfl: [validateUtils.notNull],
    jx: [validateUtils.notNull],
    bfrq: [validateUtils.notNull],
    sxrq: [validateUtils.notNull],
    sj: [validateUtils.notNull],
    bt: [validateUtils.notNull],
}

onMounted(() => {
    if (props.id) {
        // 换成根据id获取详情的接口
        request.get(`/pa/equipmentAuthApply/${props.id}`).then((res) => {
            formData.value = {
                ...formData.value,
                ...res.data,
            }
        })
    }
})

const initFormData = () => {
    formData.value = {
        id: "",
        zt: null as number | null,
        bh: "",
        bb: "",
        lx: "",
        lyfl: "",
        isRevision: "",
        f_bbid: "",
        jx: "",
        jxid: "",
        bfrq: "",
        sxrq: "",
        blqx: "",
        wcqx: "",
        bt: "",
        ckzl: "",
        bj: "",
        nr: "",
        cs: "",
        syx: "",
        gbsm: "",
        sj: "",
        sjsm: "",
        gznifjglid: "",
        fjys: "",
        ff: []  as any,
        fffwsm: "",
        departmentDesc: "",
        attachmentList: [],
        attachmentList1: [],
    }
}

const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
})

// 选择分发部门
const handleDepartmentSelected = (list: any) => {
    let bmidList = [] as string[];
    list.forEach((obj: any) => {
        bmidList.push(obj.id);
    });
    formData.ff = bmidList;
    formData.departmentDesc = list.map((obj: any) => {
        return obj.label;
    }).join(", ");
}



const formRef = ref();

// 回显数据
const setData = (data: any) => {
    initFormData();
    formData.value = {
        ...formData.value,
        ...data,
    };
}

/**
 * 获取数据
 */
const getData = (zt: number): Promise<any> => {
    return new Promise((resolve, reject) => {
        const data = {
            ...formData.value,
            dep: null,
        }
        if (zt === 10 || !props.enableValid) {
            resolve(data);
        }
        formRef.value.validate((valid: boolean) => {
            if (valid) {
                resolve(data);
            } else {
                reject();
            }
        })
    })
}

// 查看
const handleView = (id: string) => {
    router.push({
        name: "viewProjectTechBulletin",
        params: {
            id: id,
        },
    });
}





defineExpose({
    setData,
    getData,
})
</script>

<style scoped lang="scss">
.box-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>